<template>
  <div style="display: flex" class="menmuStyle tempxyz">
    <CCard class="leftCard">
      <div class="menuBtn">
        <CButton
          title="添加根节点"
          variant="outline"
          class="headTextBtnStyle system-btn-style"
          @click="addTreeNode"
          data-permission="Btn_Menu_AddR"
        >
          添加根节点
        </CButton>
        <CButton
          title="编辑根节点"
          variant="outline"
          class="headTextBtnStyle system-btn-style"
          @click="updateTreeNode"
          data-permission="Btn_Menu_UpR"
        >
          编辑根节点
        </CButton>
        <CButton
          title="删除根节点"
          variant="outline"
          class="headTextBtnStyle system-btn-style"
          @click="delTreeNode"
          data-permission="Btn_Menu_DelR"
        >
          删除根节点
        </CButton>
      </div>

      <Tree :data="treeData" ref="tree" @on-select-change="selectTree"></Tree>
    </CCard>

    <CCard class="rightCard">
      <CCardHeader class="header-wraper">
        <div class="header-left-titleWraper">
          <span class="textTitle">{{ catalogName }}列表</span>
        </div>
        <div class="header-right-wraper">
          <CButton
            color="info"
            @click="addCatalog"
            class="system-btn-style"
            data-permission="Btn_Menu_Add"
          >
            <CIcon name="cil-plus" />&nbsp;子权限
          </CButton>
        </div>
      </CCardHeader>

      <CCardBody class="card-body">
        <CCol>
          <span class="myColPri" style>权限类型</span>
          <RadioGroup v-model="queryType">
            <Radio label="0">菜单</Radio>
            <Radio label="1">按钮</Radio>
            <Radio label="3">全部</Radio>
          </RadioGroup>
        </CCol>
        <div style="height: calc(100% - 75px)">
          <TableList ref="table" :getColumn="getColumns" :getAxios="getAxios">
            <template v-slot:type="item">
              <span v-if="item.data.row.type == 0">菜单</span>
              <span v-if="item.data.row.type == 1">按钮</span>
            </template>
            <template v-slot:status="item">
              <img :src="getBadge(item.data.row.status)" />
            </template>
            <template v-slot:show_details="item">
              <CButton
                title="查看"
                variant="outline"
                class="textBtnStyle onButton system-btn-style"
                @click="getInfo(item.data.row)"
                >查看</CButton
              >
              <CButton
                title="编辑"
                variant="outline"
                class="textBtnStyle onButton system-btn-style"
                @click="update(item.data.row)"
                data-permission="Btn_Menu_Up"
                >编辑</CButton
              >
              <CButton
                title="删除"
                variant="outline"
                class="textBtnStyle onButton system-btn-style"
                @click="del(item.data.row.id)"
                data-permission="Btn_Menu_Del"
                >删除</CButton
              >
            </template>
          </TableList>
        </div>
      </CCardBody>
    </CCard>
    <Modal
      v-model="delShow"
      draggable
      scrollable
      title="删除权限"
      :styles="{ top: '340px' }"
    >
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除权限</span>
      </p>
      <div class="modalBody">
        <p>删除权限时与权限相关的信息都会丢失</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="addShow"
      draggable
      scrollable
      :styles="modalStyle"
      title="新建权限"
    >
      <p slot="header" class="modalHeader">新建权限</p>

      <CRow>
        <CCol md="12">
          <CForm>
            <CSelect
              label="权限类型"
              horizontal
              :options="typeList"
              :value.sync="perType"
              class="selectSuffix"
              placeholder="请选择权限类型"
            ></CSelect>
            <CInput
              label="权限名称"
              placeholder="请输入权限名称"
              horizontal
              v-model="catalogData.name"
            />
            <CInput
              label="权限编码"
              placeholder="请输入权限编码"
              horizontal
              v-model="catalogData.code"
            />
            <CInput
              label="权限描述"
              placeholder="请输入权限描述"
              horizontal
              v-model="catalogData.description"
            />
            <CInput
              label="权限路由"
              placeholder="请输入权限路由"
              horizontal
              v-model="catalogData.url"
            />
            <CInput
              label="权限图片地址"
              placeholder="请输入权限图片地址"
              horizontal
              v-model="catalogData.menuIcon"
            />
            <CInput
              label="权限排序"
              placeholder="请输入排序"
              horizontal
              v-model="catalogData.sortNo"
            />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="addCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="addOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="updateShow"
      draggable
      scrollable
      :styles="modalStyle"
      title="更新权限"
    >
      <p slot="header" class="modalHeader">更新权限</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CSelect
              label="权限类型"
              horizontal
              :options="typeList"
              :value.sync="perType"
              class="selectSuffix"
              placeholder="请选择权限类型"
            ></CSelect>
            <CInput
              label="权限名称"
              placeholder="请输入权限名称"
              horizontal
              v-model="catalogData.name"
            />
            <CInput
              label="权限编码"
              placeholder="请输入权限编码"
              horizontal
              v-model="catalogData.code"
            />
            <CInput
              label="权限描述"
              placeholder="请输入权限描述"
              horizontal
              v-model="catalogData.description"
            />
            <CInput
              label="权限路由"
              placeholder="请输入权限路由"
              horizontal
              v-model="catalogData.url"
            />
            <CInput
              label="权限图片地址"
              placeholder="请输入权限图片地址"
              horizontal
              v-model="catalogData.menuIcon"
            />
            <CInput
              label="权限排序"
              placeholder="请输入排序"
              horizontal
              v-model="catalogData.sortNo"
            />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="updateCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="updateOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="getShow"
      draggable
      scrollable
      :styles="modalStyle"
      title="查看权限"
    >
      <p slot="header" class="modalHeader">查看权限</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CSelect
              label="权限类型"
              horizontal
              :options="typeList"
              :value.sync="perType"
              class="selectSuffix"
              readonly
            ></CSelect>
            <CInput
              label="权限名称"
              readonly
              horizontal
              v-model="catalogData.name"
            />
            <CInput
              label="权限编码"
              readonly
              horizontal
              v-model="catalogData.code"
            />
            <CInput
              label="权限描述"
              readonly
              horizontal
              v-model="catalogData.description"
            />
            <CInput
              label="权限路由"
              readonly
              horizontal
              v-model="catalogData.url"
            />
            <CInput
              label="权限图片地址"
              readonly
              horizontal
              v-model="catalogData.menuIcon"
            />
            <CInput
              label="权限排序"
              readonly
              horizontal
              v-model="catalogData.sortNo"
            />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="getCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="getOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
  </div>
</template>

<script>
const fields = [
  {
    label: "序号",
    key: "number",
    _style: "width:80px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "权限名称",
    key: "name",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "权限类型",
    key: "type",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "权限编码",
    key: "code",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "排序",
    key: "sortNo",
    _style: "width:90px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "权限状态",
    key: "status",
    _style: "width:90px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },

  {
    key: "show_details",
    label: "操作",
    _style: "width:240px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
];
import endIcon from "@/assets/icons/endIcon.png";
import failedIcon from "@/assets/icons/failedIcon.png";
import TableList from "@/template/table/TableList";
export default {
  name: "menuManage",
  components: { TableList },
  data() {
    return {
      idList: [], //用于树数据回显
      modalStyle: { top: "250px" },
      selectactionid: 0,
      delShow: false,
      getShow: false,
      updateShow: false,
      addShow: false,
      loading: true,
      queryType: "3",
      data: [],
      clickId: -1,
      total: 0,
      currentPage: 1,
      treeData: [],
      catalogId: 0,
      fields,
      name: "",
      catalogName: "全部",
      delType: 0,
      catalogData: {
        applicationId: systemId,
        code: "",
        description: "",
        menuIcon: "",
        moduleId: moduleId,
        name: "",
        parentId: 0,
        status: 1,
        type: "",
        url: "",
        sortNo: "",
      },
      allNum: 0,
      pageSize: 15,
      pages: 0,
      perType: "",
      typeList: [
        {
          value: "1",
          label: "按钮",
        },
        {
          value: "0",
          label: "菜单",
        },
      ],

      getColumns: [
        {
          title: "权限名称",
          key: "name",
        },
        {
          title: "权限类型",
          key: "type",
        },
        {
          title: "权限编码",
          key: "code",
          className: "centerText",
          width: 180,
        },
        {
          title: "排序",
          key: "sortNo",
          className: "centerText",
          width: 120,
        },
        {
          title: "权限状态",
          key: "status",
          slot: "status",
          className: "centerText",
          width: 120,
        },
        {
          key: "show_details",
          title: "操作",
          slot: "show_details",
          className: "centerText",
          width: 220,
        },
      ],
      getAxios: {
        url: this.$api.manageApi.getByparentId, //请求路径
        method: "get", //请求方式
        dataList: { systemId: 3 }, //请求参数
      },
    };
  },
  mounted() {
    this.getCatalogTreeList();
    this.getTableList();
  },
  methods: {
    getTableList(parentId) {
      let self = this;
      self.selectactionid = parentId;
      self.data = [];
      let path = this.$api.manageApi.getByparentId;
      let param = {
        systemId: systemId,
        parentId: parentId,
        type: self.queryType == "3" ? "" : self.queryType,
        pageNum: self.currentPage,
        pageSize: self.pageSize,
      };

      let getAxiosData = {
        url: path,
      };
      self.$refs.table.getRefreshTable(param, getAxiosData);

      /*  this.http.get(path, param).then((res) => {
        if (res.data.success) {
          self.allNum = res.data.data.total;
          self.total = Math.ceil(res.data.data.total / self.pageSize);
          self.data = res.data.data.permissionList;
          for (let i = 0; i < self.data.length; i++) {
            self.data[i].number =
                    (self.currentPage - 1) * self.pageSize + i + 1;
          }
        } else {
          this.$Message.error(res.data.message);
        }
      });*/
    },
    /**
     * 获取每页对应的value值，并转为数值型
     */
    getVendorId(event) {
      let tempdata = event.target.value;
      this.pageSize = parseInt(tempdata);
    },
    getBadge(status) {
      switch (status) {
        case 0:
          return failedIcon;
        case 1:
          return endIcon;
      }
    },
    /**
     * 点击查看按钮，显示弹窗，获取id和val值
     */
    getInfo(val) {
      this.getShow = true;
      this.clickId = val.id;
      this.catalogData = val;
    },
    /**
     * 点击取消按钮，关闭弹窗
     */
    getCancel() {
      this.getShow = false;
    },
    /**
     * 点击确定按钮，关闭弹窗
     */
    getOk() {
      this.getShow = false;
    },
    /**
     * 点击编辑按钮，显示弹窗，获取id和val值
     */
    update(val) {
      this.updateShow = true;
      this.clickId = val.id;
      this.catalogData = JSON.parse(JSON.stringify(val)); //deep copy
    },
    /**
     * 点击删除按钮，显示弹窗，获取id值
     */
    del(id) {
      this.delShow = true;
      this.clickId = id;
    },
    /**
     * 点击删除树节点按钮，显示弹窗，获取此id值
     */
    delTreeNode() {
      this.delShow = true;
      this.delType = 1;
      this.clickId = this.$refs.tree.getSelectedNodes()[0].id;
    },
    /**
     * 点击增加字典项按钮，显示弹窗
     */
    addCatalog() {
      this.addShow = true;
    },
    delOk() {
      let self = this;
      let path = this.$api.manageApi.resDelete;
      let param = {
        ids: self.clickId,
      };
      this.http.delete(path, param).then((res) => {
        if (res.data.success) {
          this.$Message.success(res.data.message);
          this.getCatalogTreeList();
          this.getTableList(self.catalogId);
        } else {
          this.$Message.error(res.data.message);
        }
      });
      this.delShow = false;
    },
    delCancel() {
      this.delShow = false;
    },
    addTreeNode() {
      this.catalogId = 0;
      this.addShow = true;
    },
    updateTreeNode() {
      let self = this;
      self.catalogId = this.$refs.tree.getSelectedNodes()[0].pid;
      self.clickId = this.$refs.tree.getSelectedNodes()[0].id;
      let path = this.$api.manageApi.getDeatil + "/" + self.clickId;
      this.http.get(path).then((res) => {
        if (res.data.success) {
          self.catalogData = res.data.data;
          this.updateShow = true;
        }
      });
    },
    addOk() {
      let self = this;
      let path = this.$api.manageApi.resCreate;
      self.catalogData.parentId = self.catalogId;
      self.catalogData.type = self.perType;
      let param = self.catalogData;
      this.http.post(path, param).then((res) => {
        if (res.data.success) {
          this.$Message.success(res.data.message);
          self.getCatalogTreeList();
          self.getTableList(self.catalogId);
        } else {
          this.$Message.error(res.data.message);
        }
      });
      this.addShow = false;
      this.catalogData = {
        applicationId: systemId,
        code: "",
        description: "",
        menuIcon: "",
        moduleId: moduleId,
        name: "",
        parentId: 0,
        status: 1,
        type: "",
        url: "",
        sortNo: "",
      };
    },
    addCancel() {
      this.addShow = false;
    },
    updateOk() {
      let self = this;

      let path = this.$api.manageApi.resUpdate + "/" + self.clickId;
      let param = {
        code: self.catalogData.code,
        description: self.catalogData.description,
        menuIcon: self.catalogData.menuIcon,
        name: self.catalogData.name,
        status: self.catalogData.status,
        type: self.catalogData.type,
        url: self.catalogData.url,
        sortNo: self.catalogData.sortNo,
        // parentId: 6,
      };
      this.http.post(path, param).then((res) => {
        this.updateShow = false;
        if (res.data.success) {
          this.$Message.success(res.data.message);
          self.getCatalogTreeList();
        } else {
          this.$Message.error(res.data.message);
        }
      });
      this.catalogData = {
        applicationId: systemId,
        code: "",
        description: "",
        menuIcon: "",
        moduleId: moduleId,
        name: "",
        parentId: 0,
        status: 1,
        type: "",
        url: "",
        sortNo: "",
      };
    },
    updateCancel() {
      this.updateShow = false;
    },

    getCatalogTreeList() {
      let self = this;
      self.treeData = [];
      let path = this.$api.manageApi.getAllTree;
      let param = {
        systemId: systemId,
        type: 0,
        treeType: 1,
      };

      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          this.idList = [];
          self.treeData = res.data.data;
          this.getIdList(self.treeData);
          this.getNewTreeNodeData(self.treeData);
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },

    getNewTreeNodeData(data) {
      let self = this;
      for (let i = 0; i < data.length; i++) {
        if (
          self.catalogId != 0 &&
          this.idList.length > 0 &&
          this.idList.indexOf(data[i].id) != -1
        ) {
          if (data[i].id == self.catalogId) {
            data[i].selected = true;
          }
          data[i].expand = true;
        } else {
          data[i].expand = false;
        }

        if (data[i].children) {
          this.getNewTreeNodeData(data[i].children);
        }
      }
    },
    getIdList(data) {
      let self = this;
      for (let i = 0; i < data.length; i++) {
        if (data[i].id == self.catalogId) {
          this.idList.push(data[i].id);
          this.idList.push(data[i].pid);
        }
        if (data[i].children) {
          this.getIdList(data[i].children);
        }
      }
    },

    selectTree() {
      let self = this;

      self.catalogId = this.$refs.tree.getSelectedNodes()[0].id;
      self.catalogName = this.$refs.tree.getSelectedNodes()[0].title;
      self.showList = true;
      self.queryType = "3";
      this.getTableList(self.catalogId);
    },
  },
  watch: {
    data(newVal, oldVal) {
      this.$nextTick(function () {
        this.GlobalPermissionRender.render();
      });
    },
    currentPage(newVal, oldVal) {
      this.currentPage = newVal;
      this.getTableList(this.selectactionid);
    },
    pageSize(newVal, oldVal) {
      this.pageSize = newVal;
      this.getTableList(this.selectactionid);
    },
    queryType(newVal, oldVal) {
      this.queryType = newVal;
      this.getTableList(this.catalogId);
    },
  },
};
</script>
<style scoped>
.col-md-2 {
  padding-left: 20px;
  padding-right: 10px;
}
.col-md-10 {
  padding-left: 0px;
  padding-right: 10px;
  margin-left: -5px;
}
.menuBtn {
  margin-top: 13px;
  border-bottom: 1px solid #c4c9d0;
  padding-bottom: 15px;
  display: flex;
  justify-content: space-evenly;
}
.ivu-tree {
  /* border: 1px solid #c4c9d0; */
  border-radius: 3px;
  /* max-height: 780px; */
  height: 100%;
  overflow: auto;
  /* overflow-y: scroll; */
  /* margin-left: 10px; */
  width: 94%;
  margin-left: 4px;
  padding: 10px;
}
::-webkit-scrollbar {
  /* width: 3px;
  height: 3px; */
  background-color: #d8d8d8;
}
::-webkit-scrollbar-thumb {
  background-color: #7eb8ee;
}

.leftTree .btn:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
.footerPage {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  color: #151517 !important;
  /* margin-right: 10px; */
}
.pageContent {
  margin-right: 26px;
  font-size: 14px;
}
.selectStyle {
  display: inline-block;
  width: 100px;
  margin-right: 5px;
}
.addTongji {
  margin-left: 10px;
}
.deleteBtn {
  margin-right: 10px;
}
.btn:hover {
  color: #d8d8d8;
}
/* 左右线对齐 */
.card-header {
  padding: 12px 20px;
}
.card-header .userTitle {
  margin-bottom: 0 !important;
  margin-top: 5px;
}

.menu {
  height: 100%;
}
.menuTable {
  height: calc(100% - 25px);
  overflow-y: auto;
}
</style>

<style scoped>
.taskType-treeDiv {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
}
.menmuStyle {
  height: 100%;
}
.imageControl-treeDiv {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
}
.ztree {
  margin: 0;
  padding: 0;
}
.rightCard {
  width: 80%;
  margin-left: 10px;
  flex: 1;
}

.leftCard {
  width: 18%;
}
/deep/.card {
  margin-bottom: 0;
}

/deep/.ivu-table td.centerText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  text-align: -moz-center;
  text-align: -webkit-center;
}
.onButton:hover {
  color: white;
}

/deep/ footer.page-link:hover {
  background-color: #ffffff;
}
</style>
